<template>
  <Result status="success" title="更改密码成功" :sub-title="getSubTitle">
    <template #extra>
      <a-button key="console" type="primary" @click="finish"> 返回登录 </a-button>
    </template>
  </Result>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref, onMounted, watchEffect, watch } from 'vue';
import { Form, Input, Button, Result } from 'ant-design-vue';
import { useI18n } from '@/hooks/web/useI18n';
import { useLoginState } from '../login/useLogin';
import { useCountdown } from '@/components/CountDown/src/useCountdown';
import { propTypes } from '@/utils/propTypes';

export default defineComponent({
  name: 'step3',
  components: {
    Button,
    Form,
    FormItem: Form.Item,
    Input,
    Result,
  },
  props: {
    accountInfo: {
      type: Object,
      default: () => ({}),
    },
    count: propTypes.number.def(5),
  },
  emits: ['finish'],
  setup(props, { emit }) {
    const { t } = useI18n();
    const { accountInfo } = props;
    const { handleBackLogin } = useLoginState();

    const { currentCount, start } = useCountdown(props.count);
    const getSubTitle = computed(() => {
      return t('sys.login.subTitleText', [unref(currentCount)]);
    });
    /**
     * 倒计时
     */
    watchEffect(() => {
      if (unref(currentCount) === 1) {
        setTimeout(() => {
          finish();
        }, 500);
      }
    });

    /**
     * 结束回调
     */
    function finish() {
      handleBackLogin();
      emit('finish');
    }

    onMounted(() => {
      start();
    });

    return {
      getSubTitle,
      finish,
    };
  },
});
</script>
